iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Mobile Development

Andriod Studio 菜鳥的學習分享系列 第 25

[Android Studio菜鳥的學習分享]Fragment應用(下)-BottomNavigationView選單 + ViewPaper

  • 分享至 

  • xImage
  •  

前幾天我分享了BottomNavigationView選單製作,
今天要分享結合ViewPaper頁面容器,
做到可以點選和左右滑動切換的功能~
請先觀看:
[Android Studio菜鳥的學習分享]UI分享(二) - BottomNavigationView
[Android Studio菜鳥的學習分享]ViewPaper 可滑動介面分享
兩篇分享~


結果預覽:

Fragment應用(下)-BottomNavigationView選單 + ViewPaper


新創建的三個Fragment頁面

BMI -> FragmentTest01Bmi
Order -> FragmentTest02Order
Setting -> FragmentTest03Setting
https://ithelp.ithome.com.tw/upload/images/20200928/20129524EtmxgkhHeP.jpg


BottomNavigationView-創建Menu

詳細操作請見
[Android Studio菜鳥的學習分享]UI分享(二) - BottomNavigationView


ViewPaper-創建適配器(Adapter)

詳細操作請見
[Android Studio菜鳥的學習分享]ViewPaper 可滑動介面分享


activity_main.xml

https://ithelp.ithome.com.tw/upload/images/20200929/20129524HQscNoYgmh.jpg

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPagerMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/menulist"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

        </com.google.android.material.bottomnavigation.BottomNavigationView>
        
    </androidx.constraintlayout.widget.ConstraintLayout>
    
</LinearLayout>

MainActivity.java

package com.example.itthirty;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MenuItem menuItem;
    private BottomNavigationView bottomNavigationView;

    // Step01-製作BottomNavigationView按下個方法:
    private BottomNavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            // Step02-BottomNavigationView按下時判斷Menu的ID,讓ViewPaper跳去相對應的Fragment:
            switch (item.getItemId()){
                case R.id.nav1_BMI:
                    viewPager.setCurrentItem(0);
                    break;
                case R.id.nav2_order:
                    viewPager.setCurrentItem(1);
                    break;
                case R.id.nav3_setting:
                    viewPager.setCurrentItem(2);
                    break;
            }
            return false;
        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Step03-設定BottomNavigationView的按下事件監聽器:
        bottomNavigationView = findViewById(R.id.navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener);

        // Step04-設定ViewPaper的適配器:
        MainPagerAdapter adapter = new MainPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentTest01Bmi(), "BMI");
        adapter.addFragment(new FragmentTest02Order(), "Order");
        adapter.addFragment(new FragmentTest03Setting(), "Setting");
        viewPager = findViewById(R.id.viewPagerMain);
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(3);

        // Step05-設定ViewPaper的事件監聽器:
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            // ViewPaper選擇到其他頁面時:
            @Override
            public void onPageSelected(int position) {
                // Step06-將相對應的bottomNavigationView選項選取:
                menuItem = bottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

}

上一篇
[Android Studio菜鳥的學習分享]Fragment應用(上)-TabLayout選單 + Fragment
下一篇
[Android Studio菜鳥的學習分享]雙擊關閉程式
系列文
Andriod Studio 菜鳥的學習分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
talo90015
iT邦新手 5 級 ‧ 2020-11-09 19:06:07

請問一下Allen大,如果滑動頁面沒問題,但是點擊BottomNavigation沒有辦法切換頁面會是哪邊 沒有設定到?

Allen iT邦新手 4 級 ‧ 2020-11-12 02:07:30 檢舉

上方分享MainActivity.java -> Step01-製作BottomNavigationView按下個方法:
Step02-BottomNavigationView按下時判斷Menu的ID,讓ViewPaper跳去相對應的Fragment:
這兩個是按鈕監聽器的部分,你可以參考一下~

talo90015 iT邦新手 5 級 ‧ 2020-12-06 00:49:27 檢舉

感謝Allen大的解答!已經排除了!另外說聲抱歉拖這麼久才像您道謝!再次感謝您的解答

我要留言

立即登入留言